import { defineStore } from "pinia";
import { ref, reactive } from "vue"
import { ElMessage } from "element-plus";
import mittBus from '@/utils/mitt';

import { queryChannelStatisticsPageApiPost,channelUpdatePutSwitchApiPut } from "@/api/allProduct"
import useInstance from '@/hooks/useInstance';
export const onlineProChannelStore = defineStore("onlineProChannelStoreId", () => {
    const { global } = useInstance();
    const detailOrder = ref<{ show: (title: string, row?: any) => void }>()
    const staticChartRef = ref<{ show: (title: string, row?: any) => void }>()


    const detailData = ref([
        {
            type: "text",
            prop: "channelKey",
            name: "渠道Key",
            value: null
        },
    ])
    const tableProp = reactive(
        {
            name: "onlineProChannelStore",
            propsList: [

                {
                    prop: 'channelKey',
                    label: '渠道key',
                    type: 'normal',
                    minWidth: '80px',
                    hidden: true,
                },
                {
                    prop: 'channelName',
                    label: '渠道名称',
                    type: 'normal',
                    minWidth: '150px',
                    hidden: true,
                },
                {
                    prop: 'productCode',
                    label: '产品编码',
                    type: 'normal',
                    minWidth: '80px',
                    hidden: true,
                },
                {
                    prop: 'date',
                    label: '日期',
                    type: 'normal',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'productName',
                    label: '产品名称',
                    type: 'normal',
                    minWidth: '240px',
                    hidden: true,
                },
                {
                    prop: 'putSwitch',
                    label: '投放开关',
                    type: 'custom',
                    slotName:'putSwitch',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'restrictNum',
                    label: '限量',
                    type: 'normal',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'productClass',
                    label: '产品分类',
                    type: 'normal',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'pageViews',
                    label: '今日PV',
                    type: 'custom',
                    slotName: 'pageViews',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'uniqueVisitors',
                    label: '今日UV',
                    type: 'custom',
                    slotName: 'uniqueVisitors',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'orderQuantity',
                    label: '今日订单',
                    type: 'custom',
                    slotName: 'orderQuantity',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'conversionNum',
                    label: '今日转化',
                    type: 'custom',
                    slotName: 'conversionNum',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'validConversionNum',
                    label: '有效转化',
                    type: 'custom',
                    slotName: 'validConversionNum',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'todayUvConversionRate',
                    label: '今日UV转化率',
                    type: 'custom',
                    slotName: 'todayUvConversionRate',
                    minWidth: '110px',
                    hidden: true,
                },
                {
                    prop: 'todayCancellationRate',
                    label: '今日解约率',
                    type: 'custom',
                    slotName: 'todayCancellationRate',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'dynamicConversionSwitch',
                    label: '动态转换开关',
                    type: 'normal',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'dynamicConversionRate',
                    label: '动态转化率',
                    type: 'normal',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'lastConversionTime',
                    label: '上次转化时间',
                    type: 'normal',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'deviation',
                    label: '订单偏差',
                    type: 'normal',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'category',
                    label: '类别',
                    type: 'normal',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'exposure',
                    label: '曝光',
                    type: 'normal',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'consume',
                    label: '消耗',
                    type: 'normal',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'cpm',
                    label: 'cpm',
                    type: 'normal',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'cpa',
                    label: 'cpa',
                    type: 'normal',
                    minWidth: '100px',
                    hidden: true,
                },
                {
                    prop: 'equitySchema',
                    label: '选择权益方案',
                    type: 'normal',
                    minWidth: '100px',
                    hidden: true,
                },


                {
                    type: 'handle',
                    label: '操作',
                    minWidth: '180px',
                    btnType: ' link',
                    slotName: 'handle',
                    hidden: true,
                }
            ]
        })

    const listSearch = reactive({
        orders: ["created_time desc"],
        condition: {
            productType: null,// 产品分类
            productCategoryCode: null,// 产品大类
            supplierCode: null,// 供应商编码
            productCode: null,// 产品编码
            putSwitch: null,// 投放开关
            startTime: null,// 开始时间
            endTime: null,// 结束时间
        },
        pageSize: 20,
        pageNum: 1
    });
    const pageParams = reactive({
        tableHeight: 400,
        total: 0,
        loadIng: false,
        tableData: []

    })
    const getDate1 = async (type: string) => {
        pageParams.loadIng = true
        if (type == 'reset') {
            listSearch.pageNum = 1
            listSearch.pageSize = 20
            Object.keys(listSearch.condition).forEach((it: any) => {
                // @ts-ignore
                listSearch.condition[it] = null
            })
        }

        try {
            const res = await queryChannelStatisticsPageApiPost(listSearch)
            pageParams.loadIng = false
            if (res.code == 20000) {
                pageParams.tableData = res.data.records && res.data.records.map((item: any) => {
                    return {
                        ...item

                    }
                })
                pageParams.total = res.data.total
            }
        } catch (error) {
            console.log(error);
            pageParams.loadIng = false

        }finally{
            mittBus.emit('scrollUpdate')
        }
    }
    const handPage = (params: any) => {
        listSearch.pageNum = params.pageNum
        listSearch.pageSize = params.pageSize
        getDate1('search')
    }
    const statisticalChart = (row: any) => {
        staticChartRef.value?.show('product', row)
    }
    const switchChange =async (row:any,e: any) => {
        // 确认
        const arr = ['','渠道投放开启','渠道投放关闭']
        const flag = await global.$myconfirm(`是否确定${arr[e]}？  ${row.productName}`)
        if (flag) {
            const res = await channelUpdatePutSwitchApiPut({id:row.channelCode,switch:e})
            if(res.code == 20000){
                ElMessage({
                    message:arr[e] + ' 切换成功',
                    type: "success",
                  });
                getDate1('search')
            }else{
                getDate1('search')

            }
        } else{
            ElMessage({
                type: "info",
                message: "取消渠道投放开关切换"
            })
            getDate1('search')
        }
    
    }
    return {
        detailData, tableProp, listSearch, pageParams, detailOrder,staticChartRef,
        getDate1, handPage,statisticalChart,switchChange
    }
})